<template>
    <div class="wrapper" style="padding:20px">
        <el-form :model="arrivalForm" ref="arrivalForm" :rules="rules" :disabled="mode === 'detail'"
            label-position="top">
            <template>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="入库公司" prop="company_id">
                            <el-select v-model="arrivalForm.company_id" @change="handleChangeCompany" filterable
                               placeholder="请选择">
                                <el-option v-for="item in companyData" :label="item.name" :value="item.id + ''"
                                    :key="item.id">
                                    {{
                                     item.name 
                                    }}</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="入库司机" prop="driver_id">
                            <el-select v-model="arrivalForm.driver_id" filterable placeholder="请选择" @change="handleChangeDriver">
                                <el-option v-for="item in driverData" :label="item.name" :value="item.id + ''"
                                    :key="item.id">{{
                                     item.name 
                                    }}</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="入库司机电话" prop="phone">
                            <el-input v-model="arrivalForm.phone" style="width:180px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="入库车牌号" prop="car_no">
                            <el-select v-model="arrivalForm.car_no" filterable placeholder="请选择">
                                <el-option v-for="item in carNumberData" :label="item.license_plate"
                                    :value="item.license_plate" :key="item.id">{{  item.license_plate  }}</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="发车时间" prop="send_time">
                            <el-date-picker v-model="arrivalForm.send_time" type="datetime" placeholder="选择日期时间"
                                style="width:180px" value-format="timestamp">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="预计入库时间" prop="expected_time">
                            <el-date-picker v-model="arrivalForm.expected_time" type="datetime" placeholder="选择日期时间"
                                style="width:180px" value-format="timestamp">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="margin-top: 20px; text-align: right;padding-bottom:20px">
                    <el-button @click="handleCancel">取消</el-button>
                    <el-button type="primary" @click="submitForm">确定</el-button>

                </div>
            </template>
        </el-form>
    </div>
</template>

<script>
import {
    waybillWareHouseCreate,
    driverBox,
    vehicleBox,
    carrierBox
} from "@/api/waybill";
import { timestamp10 } from "@/utils/mUtils";
export default {
    name: 'arrival',
    components: {},
    props: ['ids'],
    data() {
        return {
            arrivalForm: {
                phone:''
            },
            mode: 'add',
            rules: {
                company_id: [
                    { required: true, message: "请填写入库公司", trigger: "change" },
                ],
                driver_id: [
                    { required: true, message: "请填写入库司机", trigger: "change" },
                ],
            },
            companyData: [],
            driverData: [],
            carNumberData: [],
        };
    },
    watch: {
    },
    mounted() {
        driverBox().then((res) => {
            this.driverData = res.data;
        });
        vehicleBox().then((res) => {
            this.carNumberData = res.data;
        });

        carrierBox().then((res) => {
            this.companyData = res.data;
        });
    },
    methods: {
        submitForm() {
            this.$refs["arrivalForm"].validate((valid) => {
                if (!valid) return;
                const _ruleForm = {
                    waybill_id_list: this.ids,
                    type: '1',
                    ...this.arrivalForm,
                    send_time: timestamp10(this.arrivalForm.send_time),
                    expected_time: timestamp10(this.arrivalForm.expected_time)
                };
                waybillWareHouseCreate(_ruleForm).then(res => {
                    if (res.code === 10000) {
                        this.$message({
                            message: "到港入库信息保存成功",
                            type: "success",
                        });
                        this.$emit('close');
                    }
                });
            });
        },
        clearForm() {

            this.arrivalForm = {};
        },
        handleCancel() {
            this.$emit('close');
        },
        handleChangeCompany(val) {
            const item = this.companyData.find((item) => item.id === Number(val));
            if (item) {
                this.arrivalForm["company_name"] = item.name;
            }
        },
        handleChangeDriver(val) {
            const driver = this.driverData.find((item) => item.id === Number(val));
            const { id, name, mobile } = driver;
            this.arrivalForm.driver_name = name;
            this.arrivalForm.phone = mobile;
        },
    },
};
</script>
<style lang="scss" scoped>
.wrapper {}
</style>
